<template>
  <div id="dept">
    <aside class="sidebar">
      <el-tree :data="treeData" ref="deptTree"  @node-click="getDeptList"></el-tree>
    </aside>
    <section class="content">
      <div class="filter">
        <el-form :inline="true" :model="filter" class="demo-form-inline">
          <el-form-item label="部门名称">
            <el-input v-model="filter.name" placeholder="请输入部门名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="getDeptList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="list">
        <div class="button-bar">
          <el-button class="btn" type="primary" size="mini" icon="el-icon-plus"  @click="onAddDept" v-buttonPms="['dept','add']">新建</el-button>
          <el-button class="btn" type="warning" size="mini" icon="el-icon-edit" @click="onEditDept" v-buttonPms="['dept','edit']">编辑</el-button>
          <el-button class="btn" type="danger" size="mini" icon="el-icon-delete" @click="onDeleteDept" v-buttonPms="['dept','delete']">删除</el-button>
          <el-button class="btn" type="primary" size="mini" icon="el-icon-upload2" v-show="false">导入</el-button>
          <el-button class="btn" type="primary" size="mini" icon="el-icon-download" v-show="false">导出</el-button>
        </div>
        <div class="data">
          <el-table :data="deptList.data"  stripe ref="deptList" @select-all="onSelectAll" @select="onSelect">
            <el-table-column type="selection"  align="center"  width="50"></el-table-column>
            <el-table-column type="index" label="序号" align="center" prop="index" width="60px">
              <div slot-scope="scope">
                  {{(deptList.pageNum - 1) * deptList.pageSize + 1 + scope.$index }}
              </div>
            </el-table-column>
            <el-table-column label="部门名称" prop="name" align="center" width></el-table-column>
            <el-table-column label="上级部门" prop="parentName" align="center" width></el-table-column>
            <el-table-column label="所属区域" prop="areaName" align="center" width></el-table-column>
            <el-table-column label="创建时间" prop="createDate" align="center" width></el-table-column>
            <el-table-column label="操作" prop="opt" align="center" width>
              <slot slot-scope="scope">
                <el-button size="mini" @click="showDetails(scope)">查看</el-button>
              </slot>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination layout="prev, pager, next"
            :current-page="deptList.pageNum"
            :page-size="deptList.pageSize"
            :total="deptList.total"
            @current-change="switchPage"
            @prev-click="switchPage"
            @next-click="switchPage"
        ></el-pagination>
      </div>
    </section>
    <el-dialog :title="optType" :visible.sync="showDialog">
      <component v-bind:is="curComponent" :initData="initData" @closeDialog="closeDialog" @refresh="refresh"></component>
    </el-dialog>
  </div>
</template>
<script>
import deptDetails from "./dept-details";
import editDept from "./dept-edit.vue";
import { setTimeout } from 'timers';
export default {
  components: { editDept, deptDetails },
  data() {
    return {
      treeData:[],
      deptList: {
        pageNum: 1, //页码
        pageSize:25,
        total: 5, //总共条数
        data: []
      },
      filter: {
        name: ""
      },
      checked:[],//选择的列表
      initData:{},
      optType: "新增部门", //新增部门/编辑部门/导入/导出/查看详情
      showDialog: false,
      curComponent: "editDept", //当前组件，editDept/导入/导出...
    };
  },
  methods: {
    //请求部门树数据
    getTreeData(){
        this.$http.getDeptTree()
        .then((res)=>{
          var data=res.data.data
          this.treeData = data;
        }).catch((err)=>{
            throw(err)
        })
    },

    getDeptList(node) {
      if(this.$refs.deptList){
          this.checked=[];
          this.$refs.deptList.clearSelection();
      }
      var submitData = {
          current: this.deptList.pageNum,
          size: this.deptList.pageSize,
          parentId: node&&node.id || "",
          ...this.filter,
      }
      
      this.$http.getDeptList(submitData)
      .then(res => {
        var data = res.data.data;
        this.$set(this.deptList,'pageNum',data.current || this.deptList.pageNum);
        this.$set(this.deptList,'pageSize',data.size || this.deptList.pageSize);
        this.$set(this.deptList,'total',data.total );
        this.$set(this.deptList, "data", data.records);
      }).catch(err => {
        if(err.data && err.data.message){
            
        }else{
          window.message.close()
            window.message= this.$message({
                type:'error',
                message:'程序出错,查询失败!',
                showClose:true,
            })
        }
        throw(err)
      });
    },

    switchPage(pageNum){
      this.deptList.pageNum=pageNum
      this.getDeptList()
    },

    refresh(){
      this.getTreeData()
      this.getDeptList()
    },


    //添加部门
    onAddDept() {
      this.$refs.deptList.clearSelection();
      this.optType = "新建部门";
      this.showDialog = true;
      this.curComponent=editDept
      this.$nextTick(()=>{
        this.checked = [];
        this.initData=this.checked[0]
      })
    },

    //编辑
    onEditDept(event, row) {
      
      if (this.checked.length > 1) {
        this.$message.warning("只能选中一个");
        return;
      } else if (this.checked.length === 0) {
        this.$message.warning("请选中要编辑的部门!");
        return;
      }
      this.curComponent=editDept
      this.optType = "编辑部门";
      this.showDialog = true;
      this.$nextTick(()=>{
        this.initData=this.checked[0]
      })
    },

    //删除部门
    onDeleteDept(index, row) {
      if(this.checked.length===0){
        this.$message.warning("请选择要删除的部门!");
        return;
      }else if (this.checked.length > 1) {
        this.$message.warning("只能选中一个");
        return;
      }
      let ids = this.checked.map(item => {
        return item.id;
      });
      var submitData={id:ids.join(),moduleName:"部门管理"}
      this.$http.deleteDept(submitData)
      .then(res => {
        this.$message.success("删除成功！")
        this.getDeptList(); //重新加载列表
      }).catch(err => {
            if(err.data && err.data.message){
                
            }else{
                window.message.close()
                window.message= this.$message({
                    type:'error',
                    message:'程序出错,操作失败!',
                    showClose:true,
                })
            }
            throw(err)
      });
    },

    
    

    //全选
    onSelectAll(selection) {
      this.checked = selection;
    },
    //选择
    onSelect(selection, row) {
      this.checked = selection;
    },
    

    closeDialog(bool) {
      this.showDialog = bool;
      this.checked=[]
    },

    //查看详情
    showDetails(rowData){
      this.curComponent=deptDetails
      this.optType = "查看详情";
      this.showDialog = true;
      this.$nextTick(()=>{
        this.initData=rowData.row
      })
    }
  },
  created() {
    this.getTreeData()
    this.getDeptList();
  }
};
</script>
<style scoped lang="scss">
#dept {
  height: 100%;
  display: flex;
  flex-direction: row;
  .sidebar {
    width: 25%;
    min-width: 250px;
    margin: 10px;
    margin-right: 0px;
    border-right: 1px solid #4a5b71;
  }
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
.filter {
  margin: 10px;
  border: 1px solid #eee;
  border-radius: 10px;
  /deep/ .el-form{
       .el-form-item{
           flex-basis:30%;
            margin:5px;
        }
        .el-input__inner{
	        height:35px;
	        line-height:35px;
        }
    }
}
.list {
  margin: 10px;
  margin-top: 0px;
  border: 1px solid #eee;
  border-radius: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  .button-bar {
    width: 100%;
    .btn {
      margin: 10px;
    }
  }
  .data {
    flex: 1;
    overflow: auto;
  }
}
</style>
<style scoped lang="scss">
//element样式微调
.el-form.el-form--inline {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    flex-basis: 30%;
    flex-grow: 1;
    margin: 10px;
  }
}

.el-table {
  width: 100%;
  /deep/ .el-table__header {
    width: 100% !important;
  }
  /deep/ .el-table__body {
    width: 100% !important;
  }

  /deep/ .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>


